<template>
  <div class="app-container">
    <!-- <el-form ref="form" :inline="true" :model="form">
      <el-form-item prop="name">
        <el-input v-model="form.name" placeholder="用户名/ID"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">搜索</el-button>
      </el-form-item>
    </el-form> -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="用户ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.user_id }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账户余额" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.balance }}</span>
        </template>
      </el-table-column>
      <el-table-column label="钱包地址" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="500">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click.native="viewDetail(scope.row.user_id)">账户详情</el-button>
          <el-button size="mini" type="warning" plain @click.native="resetLoginPwd(scope.row.user_id)">重置登录密码</el-button>
          <!-- <el-button size="mini" type="success" plain @click.native="resetPayPwd(scope.row.user_id)">重置支付密码</el-button> -->
          <el-button size="mini" type="danger" plain @click.native="delUser(scope.row.user_id)">删除账户</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPages" :limit.sync="listQuery.pageSize" align="center" @pagination="fetchData" /> -->
  </div>
</template>

<script>
import { getUserList, deleteUser, modifyPassword } from '@/api/table'
// import Pagination from '@/components/Pagination'

export default {
  // components: { Pagination },
  data() {
    return {
      form: {
        name: ''
      },
      list: null,
      listLoading: false,
      total: 0,
      listQuery: {
        currentPages: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getUserList(this.listQuery).then(response => {
        this.list = response.data
        // this.total = response.data.totalElements
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      })
    },
    // submitForm() {
    //   console.log(this.form.name)
    // },
    // viewDetail(id) {
    //   this.$router.push({
    //     path: '/user/detail',
    //     query: {
    //       id: id
    //     }
    //   })
    // },
    resetLoginPwd(user_id) {
      this.$confirm(`确定重置ID为${user_id}用户的登录密码?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        modifyPassword({
          user_id: user_id
        }).then(res => {
          this.$message('重置成功')
        })
      })
    },
    // resetPayPwd(id) {
    //   this.$confirm(`确定重置ID为${id}用户的支付密码?`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     console.log('确定')
    //   }).catch(() => {
    //     console.log('取消')
    //   })
    // },
    delUser(user_id) {
      this.$confirm(`确定删除ID为${user_id}的用户?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser({
          user_id: user_id
        }).then(res => {
          this.$message('删除成功')
          this.fetchData()
        })
      })
    }
  }
}
</script>

<style>
.name{
  color:#409EFF;
}
.imgs{
  width:100px;
  height:100px;
  display:inline-block;
  margin: 0 10px;
  border:1px solid #eee;
}
.img{
  width:100px;
  display:inline-block;
  cursor: pointer;
}
.curScaleImg{
  width:100%;
  height:auto;
}
</style>
